<template>
  <div class="container">
    <a-button @click="translate">平移</a-button>
    <a-button @click="reduce">缩小</a-button>
    <a-button @click="zoom">放大</a-button>
    <a-button @click="toSVGs">导出svg</a-button>
    <div id="container"></div>
  </div>
</template>

<script lang="ts" name="Index01page">
const data = {
  nodes: [
    {
      id: "node1",
      x: 0,
      y: 0,
      width: 80,
      height: 90,
      label: "hello",
    },
    {
      id: "node2",
      x: 200,
      y: 200,
      width: 80,
      height: 90,
      label: "world",
    },
    {
      id: "node3",
      shape: "rect",
      x: 300,
      y: 200,
      width: 80,
      height: 90,
      label: "hello1",
    },
    {
      id: "node4",
      shape: "circle",
      x: 400,
      y: 200,
      width: 50,
      height: 90,
      label: "world2",
    },
    {
      id: "node5",
      shape: "ellipse",
      x: 500,
      y: 200,
      width: 50,
      height: 90,
      label: "椭圆",
    },
    {
      id: "node6",
      shape: "polyline",
      x: 600,
      y: 200,
      width: 80,
      height: 40,
      label: "折线",
      attrs: {
        body: {
          fill: "#0fdbff",
          stroke: "#9254de",
          refPoints: "0,0 0,10 10,10 10,0",
        },
      },
    },
    {
      id: "node7",
      shape: "path",
      x: 700,
      y: 200,
      width: 80,
      height: 50,
      label: "路径",
      path: "m162.18999,224.05876l108.86108,0l33.63891,-86.70652l33.63893,86.70652l108.86107,0l-88.07031,53.58696l33.64065,86.70652l-88.07034,-53.58842l-88.07033,53.58842l33.64066,-86.70652l-88.07033,-53.58696z",
      attrs: {
        body: {
          fill: "#0fdbff",
          stroke: "#9254de",
          // refPoints: '0,0 0,10 10,10 10,0'
        },
      },
    },
    {
      id: "node8",
      shape: "path",
      x: 800,
      y: 200,
      width: 80,
      height: 50,
      label: "路径1",
      path: "m57.71499,177.64166l0,0c0,-10.7318 11.13225,-19.43164 24.86458,-19.43164l11.30209,0l0,0l54.25001,0l101.71873,0c6.59451,0 12.91891,2.04725 17.58194,5.6914c4.66299,3.64414 7.28266,8.58666 7.28266,13.74025l0,48.57911l0,0l0,29.14746l0,0c0,10.73181 -11.13225,19.43164 -24.86459,19.43164l-101.71873,0l-70.87094,49.41015l16.62093,-49.41015l-11.30209,0c-13.73233,0 -24.86458,-8.69984 -24.86458,-19.43164l0,0l0,-29.14746l0,0l-0.00001,-48.57911z",
      attrs: {
        body: {
          fill: "#0fdbff",
          stroke: "#9254de",
          // refPoints: '0,0 0,10 10,10 10,0'
        },
      },
    },
  ],
  edges: [
    {
      // shape:'double-edge',
      source: "node1",
      target: "node2",
      markup: [
        {
          tagName: "path",
          selector: "p2",
        },
      ],
      attrs: {
        p2: {
          connection: true,
          fill: "none",
          stroke: "#73d13d",
          strokeWidth: 4,
          pointerEvents: "none",
          strokeLinejoin: "round",
          targetMarker: {
            tagName: "path",
            fill: "#73d13d",
            stroke: "#237804",
            strokeWidth: 1,
            d: "M 10 -3 10 -10 -2 0 10 10 10 3",
          },
        },
      },
    },
    {
      source: "node3",
      target: "node4",
    },
    {
      source: "node4",
      target: "node5",
    },
  ],
};

import { Graph, DataUri } from "@antv/x6";
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  setup() {
    let graph = {};
    onMounted(() => {
      graph = new Graph({
        container: document.getElementById("container") as HTMLElement,
        width: 2000,
        height: 600,
        background: {
          color: "#f5f5f5",
        },
        panning: {
          enabled: true,
          // modifiers:'shift',
          eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
        },
        grid: {
          size: 10,
          visible: true,
        },
      });

      (graph as Graph).fromJSON(data);
    });

    const translate = () => {
      (graph as Graph).translate(80, 40);
    };

    const reduce = () => {
      (graph as Graph).zoom(-0.5);
    };

    const zoom = () => {
      (graph as Graph).zoom(0.5);
    };

    const toSVGs = () => {
      console.log(graph);
      //   (graph as Graph).toJPEG((dataUri:string) => {
      //   // 下载
      //   DataUri.downloadDataUri(dataUri, '文件名.png')
      // })
    };

    // 导出图片的函数
    // function exportGraphToImage() {
    //   // 获取画布快照
    //   const snapshot = (graph as Graph).snapshot();

    //   // 创建canvas元素
    //   const canvas = document.createElement('canvas');
    //   canvas.width = graph.options.width;
    //   canvas.height = graph.options.height;

    //   // 将快照绘制到canvas上
    //   const ctx = canvas.getContext('2d');
    //   snapshot.render(ctx);

    //   // 将canvas转换为图片并下载
    //   const img = new Image();
    //   img.onload = () => {
    //     // 创建一个链接元素用于下载
    //     const link = document.createElement('a');
    //     link.download = 'graph-export.png';
    //     link.href = canvas.toDataURL('image/png');
    //     link.click();
    //   };

    // 将canvas数据转换为图片
    //   img.src = canvas.toDataURL('image/png');
    // }

    return {
      translate,
      reduce,
      zoom,
      toSVGs,
    };
  },
});
</script>

<style></style>
